<template>
	<uv-popup ref="popup" type="bottom" background-color="#fff" @maskClick="closeFun" round="32rpx" :safe-area-inset-bottom="false">
		<view class="px-40 pt-40 pb-20 flex items-center justify-between">
			<view class="text-30 flex items-center"><image :src="`${$imageBaseUrl}card.png`" class="mr-10 w-40 h-40" style="margin-top: 3rpx" />复习卡</view>
			<view class="flex items-center justify-center statusbox">
				<view class="flex items-center">
					<view class="box"></view>
					<view class="text-gray-80">未学</view>
				</view>
				
				<view class="current flex items-center">
					<view class="box"></view>
					<view class="text-gray-80">已学</view>
				</view>
				
				<view class="actived flex items-center">
					<view class="box"></view>
					<view class="text-gray-80">当前</view>
				</view>
			</view>
		</view>
		
		<scroll-view scrollY class="flex1 mb-20" style="max-height: 640rpx; display: flex; flex-direction: column">
			<view class="cardbox grid flex-1" style="min-height: 0">
				<view class="flex items-center justify-center grid-item" v-for="item, keys in list" :key="keys" @click="itemFun(keys)">
					<text class="number" :class="{ actived: current === keys, current: item.spell }" >
						{{ keys + 1 }}
					</text>
				</view>
			</view>
		</scroll-view>
		
		<view class="flex px-40" v-if="button">
			<view class="btn" @click="submitFun">结束复习并提交</view>
		</view>
		
		<view class="h-4" />
	</uv-popup>
</template>

<script setup>
import { imgPath } from '@/common/config'
import {watch, ref} from 'vue'
const props = defineProps({
	modelValue: Boolean,
	list: Array,
	current: Number,
	button: {
		type: Boolean,
		default: true
	}
})

const emit = defineEmits(['update:modelValue', 'card', 'submit', 'load', 'close'])

const popup = ref()
watch(() => props.modelValue,(newVal, oldVal) => {
	if(newVal){
		popup.value.open('bottom')
	} else{
		popup.value && popup.value.close()
	}
}, { immediate: true, deep: true})

const closeFun = () => {
	emit("update:modelValue")
	emit('close')
}
const itemFun = (keys) => {
	emit('card', keys)
}

/** 结束并提交 */
const submitFun = () => {
	emit('submit');
};


</script>

<style lang="scss" scoped>
	.title{font-size: 32rpx; padding:20rpx 40rpx;}
	.cardbox{padding: 20rpx 40rpx 50rpx}
	.btn{flex: 1;margin-bottom: 40rpx; font-size: 30rpx; background-color: #0b9aff; color: #fff; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 50rpx;}
	.cardbox .number{width: 62rpx; color: #999; height: 62rpx; font-size: 28rpx; line-height: 60rpx; text-align: center; background-color: rgba($gray, 0.05); border-radius: 100%;margin-bottom: 30rpx;border: 1px solid rgba($gray, 0.05)}
	.cardbox .number.error{background-color: rgba($red, 0.05); color: $red; border: 1px solid $red;}
	.cardbox .number.current{background-color: rgba($green, 0.05); color: $green; border: 1px solid $green;}
	.cardbox .number.actived{background-color: #0b9aff; color: #fff; border: 1px solid #0b9aff;}
	.statusbox{font-size: 22rpx; line-height: 1;}
	.statusbox .box{width: 8rpx; height: 8rpx; background-color: #e6e6e6; border-radius: 100%; margin-right: 10rpx; margin-left: 30rpx;}
	.statusbox .error .box{background-color: $red;}
	.statusbox .current .box{background-color: $green;}
	.statusbox .actived .box{background-color: #0b9aff;}
	.grid {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.grid-item:not(:nth-child(7n)){margin-right: calc((100% - 62rpx * 7) / 6)}
	.h-4{height: 4rpx}
</style>